<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue'
import { Icon } from 'vant';
import { assbanner } from '../../api/assistant'
const active = ref('')
const value = ref('')
const bannerdata1 = ref('')
const router = useRouter()
function onClickLeft() {
    router.back()
}
assbanner().then(res => {
    console.log(res);
    bannerdata1.value = res.data.data
})
</script>

<template>
    <div class="box">
        <van-nav-bar title="咖影院" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="content">
            <van-tabs v-model:active="active">
                <van-tab title="精选"></van-tab>
                <van-tab title="电影"></van-tab>
                <van-tab title="动漫"></van-tab>
                <van-tab title="剧场"></van-tab>
                <van-tab title="直播"></van-tab>
            </van-tabs>
            <div class="top">
                <van-search v-model="value" placeholder="请输入搜索关键词" />
                <van-icon :size="24" name="apps-o">
                    <span>分类</span>
                </van-icon>
            </div>
            <van-notice-bar scrollable text="各大电影热映,3D视感,4K画质,刺激特效,等你来看!" />

            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in bannerdata1" :key="item.id">
                    <van-image :src=item.img />
                </van-swipe-item>
            </van-swipe>
            <h2>近期热播</h2>
            <div class="top1">
                <div class="top2"></div>
                <div class="top2"></div>
                <div class="top2"></div>
                <div class="top2"></div>
                <div class="top2"></div>
                <div class="top2"></div>
            </div>
            <h2 class="top5">换一批<van-icon name="replay" /></h2>

            <h2>主题动画</h2>
            <div class="top4">
                <div class="top3"></div>
                <div class="top3"></div>
                <div class="top3"></div>
                <div class="top3"></div>
                <div class="top3"></div>
                <div class="top3"></div>
            </div>
            <h2>换一批<van-icon name="replay" /></h2>

        </div>
    </div>
</template>

<style scoped>
.van-search {
    width: 80%;
}

.top {
    display: flex;
}

span {
    height: .34rem;
    font-size: .18rem;
    line-height: .6rem;
}

h2 {
    width: 100%;
    text-align: center;
}

.top1 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-evenly;
    margin-bottom: .2rem;

}

.top2 {
    width: 30%;
    background-color: aqua;
    height: 1.8rem;
    margin-top: .2rem;
    border-radius: .15rem;
}

.top1 div:nth-child(1) {
    background: url(https://img0.baidu.com/it/u=3921783813,2672862786&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1120) no-repeat 100%/cover;
}

.top1 div:nth-child(2) {
    background: url(https://img2.baidu.com/it/u=3318004613,2339309006&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=698) no-repeat 100%/cover;
}

.top1 div:nth-child(3) {
    background: url(https://img0.baidu.com/it/u=215748844,2965887832&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=689) no-repeat 100%/cover;
}

.top1 div:nth-child(4) {
    background: url(https://img2.baidu.com/it/u=3741677486,2640164228&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729) no-repeat 100%/cover;
}

.top1 div:nth-child(5) {
    background: url(https://img0.baidu.com/it/u=4202851481,2342016783&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=696) no-repeat 100%/cover;
}

.top1 div:nth-child(6) {
    background: url(https://img1.baidu.com/it/u=1096844378,2594697887&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=720) no-repeat 100%/cover;
}

.top4 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-evenly;
    margin-bottom: .2rem;
}

.top3 {
    width: 30%;
    background-color: aqua;
    height: 1.8rem;
    border-radius: .15rem;

    margin-top: .2rem;
}

.top5 {
    width: 100%;
    text-align: center;
    margin-bottom: .2rem;
}

.top4 div:nth-child(1) {
    background: url(https://img0.baidu.com/it/u=727467892,3360020074&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=712) no-repeat 100%/cover;
}

.top4 div:nth-child(2) {
    background: url(https://img1.baidu.com/it/u=4036885159,1378181575&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=663) no-repeat 100%/cover;
}

.top4 div:nth-child(3) {
    background: url(https://img1.baidu.com/it/u=417773070,1623657994&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=741) no-repeat 100%/cover;
}

.top4 div:nth-child(4) {
    background: url(https://img2.baidu.com/it/u=1103352276,3902878439&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707) no-repeat 100%/cover;
}

.top4 div:nth-child(5) {
    background: url(https://img2.baidu.com/it/u=2218144068,140434431&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889) no-repeat 100%/cover;
}

.top4 div:nth-child(6) {
    background: url(https://img1.baidu.com/it/u=120719963,3552987576&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=699) no-repeat 100%/cover;
}
</style>